<template>
	<div>
		<button @click="editBtn">实时监测</button>
		<div id="guo" style="height: 220px;overflow: auto;"></div>
	</div>
</template>

<script>
	import echarts from 'echarts/lib/echarts';
	export default {
		data() {
			return {
				gaowen: [11, 11, 15, 13, 12, 13, 10, 23, 41, 15, 33, 29],
				diwen: [1, -2, 2, 5, 3, 2, 0, 8, 9, 5, 4, -6],
				btnShow:true,
			};
		},
		methods: {
			kaishi() {
				let options = {
					title: {
						text: '未来一年气温变化', //图表顶部的标题 
						subtext: '纯属虚构', //副标题
						show: false,
						textStyle: {
							color: "#fff", // 主标题文字的颜色。
							fontStyle: "normal", // 主标题文字字体的风格。 'normal'  'italic'  'oblique'
							fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold'  'bolder'  'lighter' 500|600
						},
					},
					tooltip: { //鼠标悬浮框的提示文字
						trigger: 'axis'
					},
					legend: {
						data: ['最高气温', '最低气温'],
						textStyle: { //图例文字的样式
							color: '#ccc',
							fontSize: 16
						},
					},
					grid: {
						left: '3%',
						right: '3%',
						bottom: '0%',
						containLabel: true
					},
					xAxis: [{ //x轴坐标数据
						type: 'category',
						boundaryGap: false,
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '六月', "八月", "九月", "十月", "十一月", "十二月"],
						axisLine: {
							lineStyle: {
								color: '#fff', // 颜色
								width: 1 // 粗细
							}
						}
					}],
					yAxis: [{ //y轴坐标数据
						type: 'value',
						axisLabel: {
							formatter: '{value} °C'
						},
						axisLine: {
							lineStyle: {
								color: '#fff', // 颜色
								width: 1 // 粗细
							}
						}
					}],
					series: [ //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
						{
							name: "最高气温",
							smooth: true,
							type: "line", //pie->饼状图  line->折线图  bar->柱状图		
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'red' // 0% 处的颜色
								}, {
									offset: 0.6,
									color: 'yellow' // 100% 处的颜色
								}, {
									offset: 1,
									color: '#FFFFFF' // 100% 处的颜色
								}],
								globalCoord: false // 缺省为 false
							},
							areaStyle: {},
							data: this.gaowen,
						},
						{
							name: "最低气温",
							smooth: true,
							type: "line", //pie->饼状图  line->折线图  bar->柱状图		
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: '#BBFFFF' // 0% 处的颜色
								}, {
									offset: 0.6,
									color: '#1E90FF' // 100% 处的颜色
								}, {
									offset: 1,
									color: '#0000FF' // 100% 处的颜色
								}],
								globalCoord: false // 缺省为 false
							},
							areaStyle: {},
							data: this.diwen,
						}
					]
				}
				this.chart = echarts.init(document.getElementById("guo"));
				this.chart.setOption(options);
				window.addEventListener("resize", this.chart.resize);
			},
			editBtn() {
				if(this.btnShow){
						let thia = this
						this.timer = setInterval(()=> {
							thia.diwen.shift()
							thia.gaowen.shift()
							thia.diwen.push(thia.getRand(-40, 20))
							thia.gaowen.push(thia.getRand(10, 40))
							thia.kaishi()
							this.btnShow = false
						}, 500)
				}
			},
			getRand(min, max) {
				return parseInt(Math.random() * (max - min + 1) + min);
			}


		},
		mounted() {
			this.kaishi()

		},
	};
</script>
<style scoped lang="less">
	button{
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 8888;
	}
</style>
